<template>
  <DraggableModal
    :visible="props.showModal"
    title="修改权重"
    :maskClosable="true"
    @ok="modalOkFn"
    @cancel="modalCancelFn"
  >
    <Form
      ref="formRef"
      :model="state.data"
      :rules="rules"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 16 }"
    >
      <a-form-item label="排序权重" name="sortIndex">
        <InputNumber v-model:value="state.data.sortIndex" />
      </a-form-item>
    </Form>
  </DraggableModal>
</template>

<script setup lang="ts">
import { DraggableModal } from '@/framework/components/core/draggable-modal';
import { message, Form, InputNumber } from 'ant-design-vue';
import { reactive, ref, watch } from 'vue';
import { commonUpdate } from '@/api/common/common_data';

/**
 * const
 */
const props = withDefaults(
  defineProps<{
    showModal: boolean;
    data: any;
  }>(),
  {
    showModal: false,
  },
);
watch(
  () => props.showModal,
  () => {
    if (props.showModal) {
      state.data = props.data;
    }
  },
);
const emits = defineEmits<{
  (e: 'update:showModal', state: boolean): void;
  (e: 'weightModalOk');
}>();
const formRef = ref();
/**
 * data
 */
const state: {
  data: any;
} = reactive({
  data: {},
});
const rules = {
  sortIndex: [{ required: true, message: '数据必填！', trigger: 'change' }],
};
const modalOkFn = async () => {
  try {
    await formRef.value?.validateFields();
  } catch (err) {
    return console.log(err);
  }
  let params = {
    sortIndex: state.data.sortIndex,
    id: state.data.id,
  };
  await commonUpdate(params);
  message.success('操作成功！');
  emits('weightModalOk');
  modalCancelFn();
};
const modalCancelFn = () => {
  emits('update:showModal', false);
  formRef.value?.clearValidate();
};
</script>

<style scoped></style>
